<template>
	<view class="psxcation">
	    <p class='psxp'>请选择您要售卖的宝贝分类</p>
		<view class="psxfen">
			<view class="psxone" v-for="item in list" :key="item.id"  @click='baby(item)'>
				<view class="psxbg">
					<img class='psximg' :src="item.img" alt="">
				</view>
				
				<p class='psxtitle'>{{item.title}}</p>
			</view>
		</view>
	</view>
</template>

<script>
		import {getpsxcatList} from'../../common/api.js'
	export default {
		data() {
			return {
				list:[],
				title:''
			}
		},
		created() {
				this.$api.getpsxcatList().then(res=>{
					// console.log(res.data)
					this.list=res.data
				})
		},
		methods: {
			baby(item){
				this.title=item.title
				// uni.$emit("getbaby",this.title)
				uni.navigateTo({
					url: `/pages/issue/idle?title=${this.title}`
				})
				// console.log(this.title)
			}
		}
	}
</script>

<style scoped>
	.psxp{
		color:darkgray;
		/* margin: auto; */
		text-align: center;
		line-height: 90upx;
	}
	.psxtitle{
		text-align: center;
		color: gray;
		line-height: 70upx;
	}
	.psxbg{
		width: 150upx;
		height: 140upx;
		margin:20upx auto;
	}
	.psximg{
		width:150upx;
		
	}
	.psxfen{
		display: flex;
		width: 95%;
		margin: auto;
		justify-content: space-around;
		height: 100vh;
		flex-wrap: wrap
	}
	.psxone{
		width:240upx;
		height: 240upx;
		border-radius: 30upx;
		border: 1px solid gainsboro;
	}
</style>
